<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .main{
            width:1000px;
            margin:0 auto;
        }
    </style>

</head>

<body>
<div class="top">
    <img src="../images/top.png"/>
</div>
<div class="nav">
    <img src="../images/nav.png"/>
</div>
<div class="main">
    <img src="../images/main.png"/>
</div>
</body>

</html>

<script src="../lib/jquery-1.11.1.min.js"></script>
<script>

    //1.给页面绑定滚动事件   scroll 滚动事件
    //2.  2.1滚动的时候,获取 滚动值
    //    2.2 获取头部的高度
    //3.1如果:滚动的值大于头部的高度, 就让导航栏固定在顶部

    //给头部,设置一个margin-bottom值,值是nav的高度

   //3.2否则:滚动条的值小于 头部的高度,就让导航栏回到原来的位置

</script>

<script>
   $(function () {
      var topHei =  $(".top").height();
      var navHei = $(".nav").height();

      $(window).scroll(function () {
          if($(window).scrollTop()>topHei)
          {
              $(".top").css("marginBottom",navHei)
              $(".nav").css(
                  {
                      "position": "fixed",
                      "top":0
                  }
              )
          }

          else
          {
              $(".top").css("marginBottom",0)
              $(".nav").css(
                  {
                      "position": "static",

                  }
              )
          }
      })


   })
</script>
